<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>IFE JavaScript Task 07</title>
  <style type="text/css">
    #display {
      height: 200px;
      display: flex;
      align-items: flex-end;
      margin-top: 20px;
    }

    #display div {
      width: 30px;
      text-align: center;
      margin-right: 10px;
      color: #ffffff;
      font-size: 14px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="app">
    <div class="input">
      <input type="text" id="numInput" />
      <button type="button" id="leftIn">左侧入</button>
      <button type="button" id="rightIn">右侧入</button>
      <button type="button" id="leftOut">左侧出</button>
      <button type="button" id="rightOut">右侧出</button>
    </div>
    <div id="display"></div>
  </div>
  <script>
    (function () {
      var queue = [];
      var renderQueue = function (q) {
        if (queue.length > 0) {
          var html = '';
          queue.forEach(function (value, index) {
            html += '<div style="height:'+value+'px"></div>';
          })
          document.getElementById('display').innerHTML = html;
        } else {
          document.getElementById('display').innerHTML = '';
        }
      }
      var checkNum = function (num) {
        if (!isNaN(num)) {
          if (num >= 10 && num <= 100) {
            return true
          } else {
            alert('非10-100的数字');
            return false
          }
        } else {
          alert('非数字');
          return false
        }
      }
      
      document.getElementById('leftIn').onclick = function () {
        console.log('left in');
        var num = document.getElementById('numInput').value;
        if (checkNum(num)) {
          queue.unshift(num);
          renderQueue()
        } else {
          console.log(2);
          console.log(3);
          console.log(4);
          console.log(5);
          alert(1);
          console.log('哈哈哈.是不是傻');
          alert('加油');
          aletr('c');
        }
      }

      document.getElementById('rightIn').onclick = function () {
        console.log('right in');
        var num = document.getElementById('numInput').value;
        if (checkNum(num)) {
          queue.push(num);
          renderQueue();
        };
      }

      document.getElementById('leftOut').onclick = function () {
        console.log('left out');
        queue.shift();
        console.log(queue);
        renderQueue();
      }

      document.getElementById('rightOut').onclick = function () {
        console.log('right in');
        queue.pop();
        console.log(queue);
        renderQueue();
      }
    })()
  </script>
</body>

</html>